<template>
    <div id="muke-recycle">
        <div id="muke-recycle-title"><h3>回收站</h3></div> 
        <div id="muke-recycle-operate">
            <div class="ops" style="padding-left:13px">共{{files.length}}项</div>
            <div class="ops" v-show="checkedFiles.length!=0">,&nbsp;已选{{checkedFiles.length}}项</div>
            <div class="ops" v-show="checkedFiles.length!=0">
                <el-row>
                    <el-button size="small" icon="el-icon-refresh-left" round @click="refreshCheckedFiles(checkedFiles)">恢复</el-button>
                    <el-button size="small" icon="el-icon-delete" round @click="deleteCheckedFiles(checkedFiles)">彻底删除</el-button>
                </el-row>
            </div>
        </div>
        <hr>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="files"
                    tooltip-effect="dark"
                    style="width: 100%"
                    max-height="500"
                    v-loading="loading"
                    @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="50">
                </el-table-column>
                <el-table-column
                    label="文件名" 
                    style="width:50%">
                    <template slot-scope="scope">
                        <fileIcon id="icon" :file="scope.row" ></fileIcon>
                        <span style="line-height:40px;padding-left:10px;">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="fileSize"
                    label="文件大小"
                    style="width:30%">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="删除日期"
                    style="width:10%"
                    show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
        

    </div>   
</template>


<script>
import mukeRecycleList from '../muke_list/mukeRecycleList';
import fileIcon from '../icons/file-icon';
import util from '../../utils/util';
export default {
    components:{
        mukeRecycleList,fileIcon
    },
    mounted(){
        // 初始化查询数据
        this.queryAllDeleteFiles();
    },
    methods:{
        // 查询所有已删除的文件
        queryAllDeleteFiles(){
            this.loading = true;
            this.$axios.post(util.API_HOST + '/file/folder/deleted/query'
            ).then(response => {
                let result = response.data;
                util.dataConvert(this.files,result.data);
                this.loading = false;
            }).catch(err => {
                this.$notify.error({
                    title:'初始化查询错误',
                    message:err.message
                })
                this.loading = false;
            });
            
        },
        // 选中表格中的问件，触发事件
        handleSelectionChange(checked){
            this.checkedFiles = checked;
        },
        // 恢复选中的文件
        refreshCheckedFiles(checked){
            let files = [];
            for (const file of checked) {
                files.push({
                    id:file.id,
                    type:file.type
                });
            }
            // 调用后端接口
            this.$axios.post(util.API_HOST+'/file/folder/refreshFolders',files
            ).then(response => {
                if(response.data.code === 200){
                    this.$notify.success({
                        title:'文件恢复成功',
                        message:response.data.message
                    });
                    // 将页面数据删除
                    for (let file of checked) {
                        let idx = undefined;
                        this.files.forEach(function(obj,index){
                            if(file.id === obj.id){
                                idx = index;
                            }
                        })
                        if(idx !== undefined){
                            this.files.splice(idx,1);
                        }
                    }
                }
            }).catch(err => {
                this.$notify.error({
                    title:'文件恢复错误',
                    message:err.message
                })
            });

        },
        // 彻底删除选中的文件，文件夹
        deleteCheckedFiles(checked){
            let files = [];
            for (let file of checked) {
                files.push({
                    id:file.id,
                    type:file.type
                });
            }
            // 发送删除请求
            this.$axios.post(util.API_HOST + '/file/folder/complete/delete',files
            ).then(response => {
                // 将页面数据删除
                if(response.data.code === 200){
                    for (let file of checked) {
                        let idx = undefined;
                        this.files.forEach(function(obj,index){
                            if(file.id === obj.id){
                                idx = index;
                            }
                        })
                        if(idx !== undefined){
                            this.files.splice(idx,1);
                        }
                    }
                }
            }).catch(err => {
                this.$notify.error({
                    title:'删除失败',
                    message:err.message
                })
            });
        }
    },
    data(){
            
        return{
            files:[
                {id:1,name:'aaaaa',fileSize:'---',type:'folder',updateTime:'2021-02-20'},
                {id:2,name:'aaaaaaa.docx',fileSize:'10MB',type:'file',fileType:'docx',updateTime:'2021-02-20'},
                {id:3,name:'SpringC.docx',fileSize:'14MB',type:'file',fileType:'docx',updateTime:'2021-02-20'},
                {id:4,name:'aaaaa.xlsx',fileSize:'1.2MB',type:'file',fileType:'xlsx',updateTime:'2021-02-20'},
                {id:5,name:'aaaaa.ttt',fileSize:'1.5MB',type:'file',fileType:'ttt',updateTime:'2021-02-20'},
                {id:6,name:'aaaaa.ppt',fileSize:'23MB',type:'file',fileType:'ppt',updateTime:'2021-02-20'},
                {id:7,name:'aaaaa.rar',fileSize:'145MB',type:'file',fileType:'rar',updateTime:'2021-02-20'},
                {id:8,name:'aaaaa.zip',fileSize:'340MB',type:'file',fileType:'zip',updateTime:'2021-02-20'},
                {id:9,name:'aaaaa.html',fileSize:'1.2MB',type:'file',fileType:'html',updateTime:'2021-02-20'},
                {id:10,name:'aaaaa.txt',fileSize:'108KB',type:'file',fileType:'txt',updateTime:'2021-02-20'}
            ],
            loading:true,
            multipleSelection: [],
            isShow:false,
            checkAll: false,
            checkedFiles:[]
        }
    }
    
}
</script>

<style scoped>
    #icon{
        width: 40px;height: 40px;
        float: left;
    }
    #muke-recycle-title{
        padding-left: 13px;
    }
    #muke-recycle{
        position: absolute;
        left: 320px;right: 0;
        padding:0 20px;
    }
    #muke-recycle-operate{
        padding:20px 0;
        font-size: 15px; 
        line-height: 30px;
    }
    .ops{float: left;margin: 0 10px 0 0;}
    
    #header-checkbox{float: left; width: 30px;}
    #header-name{float: left;width: 40%;font-size: 15px;}
    #header-size{float: left;width: 25%;font-size: 15px;}
    #header-date{float: left; width: 20%;font-size: 15px;}
    #muke-recycle-file-list{
        /* background-color: aquamarine; */
        overflow: scroll;
        width: 100%;
        /* min-width: 980px; */
        max-height: 70vh;
        /* max-width: 980px; */
        margin: 20px 0px 0px 0px;
        border-bottom: 1px solid gainsboro;
    }
</style>